<template>
  <view class="container">
    <view class="header">
      <view class="header-return" @click="returnclick()"></view>
      <view class="header-title">名师答疑室</view>
    </view>
    <view class="body">
      <view class="body-top">
        <view class="body-top-icon"></view>
      </view>
      <view class="body-studio">
        <view class="body-studio-content">
          <view class="body-studio-content-title omit">
            {{ $store.state.user.studio.studioName }}
          </view>
          <view class="body-studio-content-text" :class="{ omit4: !isheight }">
            {{ $store.state.user.studio.introduction }}
          </view>
          <view
            class="body-studio-content-unfold"
            v-if="showunfold"
            @click="cunfold"
          >
            {{ unfold }}
          </view>
        </view>
      </view>
      <view class="body-teacher" v-if="teacherlist.length > 0">
        <view
          class="body-teacher-piece"
          v-for="(item, index) in teacherlist"
          :key="item.id"
        >
          <view class="body-teacher-piece-icon">
            <img
              class="body-teacher-piece-img"
              :src="item.avatar"
              v-if="item.avatar"
            />
            <view class="body-teacher-icon" v-else></view>
          </view>
          <view class="body-teacher-piece-content">
            <view class="body-teacher-piece-content-top">
              <view class="body-teacher-piece-content-name">
                {{ item.nickName }}
              </view>
              <view></view>
              <view class="body-teacher-piece-content-label">
                <view class="label color1" v-if="item.subjectId">{{
                  item.subjectId
                }}</view>
                <view class="label color2" v-if="item.periodId">{{
                  item.periodId
                }}</view>
                <!-- <view class="label color3" >{{subject[item.subjectId]}}</view> -->
              </view>
            </view>
            <view
              class="body-teacher-piece-content-text"
              :class="{ omit3: !item.isheight }"
            >
              {{ item.introduction }}
            </view>
            <view
              class="body-studio-content-unfold"
              v-if="item.showunfold"
              @click="cunfold2(index)"
            >
              {{ item.unfold }}
            </view>
          </view>
        </view>
      </view>
      <view class="body-teacher" v-else>
        <view class="nodata-icon"> </view>
      </view>
    </view>
    <view class="body-button" @click="startask()"> 开始提问 </view>
    <uni-popup ref="popup" type="center">
      <view class="popup">
        <view class="popup-close" @click="closepopup()"></view>
        <view class="popup-title">{{ popup.title }}</view>
        <view class="popup-text">{{ popup.text }}</view>
        <view class="popup-button" @click="popupjump()">{{
          popup.button
        }}</view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import {
  getWorkroomOnlineTeacher,
  getTeacherInworkroom,
  getWorkroomOnlineList,
  getOnlineSubjectAndPeriod,
} from "@/api/index";
import { getsubject, setsubject, removesubject } from "@/utils/auth6";
import { getperiod, setperiod, removeperiod } from "@/utils/auth7";
import { getgrade, setgrade, removegrade } from "@/utils/auth8";
import { getStudio, setStudio, removeStudio } from "@/utils/auth9";
import { handleImageUrl } from "@/utils/common";

export default {
  data() {
    return {
      name: this.$store.state.user.name,
      version: getApp().globalData.config.appInfo.version,
      teacherlist: [],
      grade: getgrade(),
      period: getperiod(),
      subject: getsubject(),
      studioId: null,
      total: 0,
      online: false,
      popup: {
        title: "",
        text: "",
        button: "",
        url: "",
      },
      isheight: false,
      showunfold: false,
      unfold: "展开",
      isFirst: true
    };
  },
  onLoad(option) {
    if (option.studioId) {
      this.studioId = JSON.parse(option.studioId);
      this.$store.state.user.studio.id = this.studioId;
      this.Initialize();
    } else {
      this.studioId = this.$store.state.user.studio.id;
      this.Initialize();
    }
  },
  onShow() {
    if (!this.isFirst) {
      this.studioId =
        this.$route.query.studioId || this.$store.state.user.studio.id;
  
      this.Initialize();
    }
  },
  created() {},
  methods: {
    Initialize() {
      this.workroomonlineTeacher();
      this.teacherInworkroom();
      this.workroomonlineList();

      setTimeout(() => {
        this.isFirst = false
      }, 2000)
    },
    OnlineSubjectAndPeriod(data) {
      this.online = false;
      getOnlineSubjectAndPeriod(data).then((res) => {
        if (res && res.length > 0) {
          this.online = true;
        }
      });
    },
    cunfold() {
      if (this.unfold == "展开") {
        this.unfold = "收起";
      } else {
        this.unfold = "展开";
      }
      this.isheight = !this.isheight;
    },
    cunfold2(i) {
      if (this.teacherlist[i].unfold == "展开") {
        this.teacherlist[i].unfold = "收起";
      } else {
        this.teacherlist[i].unfold = "展开";
      }
      this.teacherlist[i].isheight = !this.teacherlist[i].isheight;
    },
    workroomonlineList() {
      let data = {};
      let page = "";
      getWorkroomOnlineList(data, page).then((res) => {
        if (!res || !res.rows) return; 
        let rows = res.rows;
        // this.total = res.total
        for (let i in rows) {
          if (rows[i].id == this.studioId) {
            this.$store.state.user.studio.studioName = rows[i].studioName;
            this.$store.state.user.studio.introduction = rows[i].introduction;
            const item = rows[i]
            const obj = {
              id: item.id,
              isBelongCity: item.isBelongCity,
              organizationId: item.organizationId,
            }
            setStudio(obj);
            if (this.$store.state.user.studio.introduction && this.$store.state.user.studio.introduction.length > 84) {
              this.showunfold = true;
            }

            this.OnlineSubjectAndPeriod(obj)
            break;
          }
        }
      });
    },
    teacherInworkroom() {
      getTeacherInworkroom(this.studioId).then((res) => {
        let data = res.rows;
        for (let i in data) {
          let showunfold = false;
          // data[i].introduction = "简介简介简介简介简介简介简介简介简介简介简介简介简介简介简简介简介简介简介简介简介简介简介简介简介介简介简介简介简介简介简介简介简介简介简介"
          if (data[i].introduction && data[i].introduction.length > 51) {
            showunfold = true;
          }
          data[i] = {
            avatar: data[i].avatar,
            counselorTags: data[i].counselorTags,
            counselorTagsName: data[i].counselorTagsName,
            gradeId: data[i].gradeId,
            introduction: data[i].introduction,
            nickName: data[i].nickName,
            periodId: data[i].periodId,
            subjectId: data[i].subjectId,
            userId: data[i].userId,
            userName: data[i].userName,
            showunfold: showunfold,
            unfold: "展开",
            isheight: false,
          };
        }
        for (let i in data) {
          data[i].avatar = handleImageUrl(data[i].avatar);
          let data2 = getperiod();
          for (let j in data2) {
            if (data[i].periodId == data2[j].value) {
              data[i].periodId = data2[j].text;
            }
          }
          let data3 = getsubject();
          for (let j in data3) {
            if (data[i].subjectId == data3[j].value) {
              data[i].subjectId = data3[j].text;
            }
          }
        }
        this.teacherlist = [];
        this.teacherlist = data;
      });
    },
    workroomonlineTeacher() {
      // getWorkroomOnlineTeacher getTeacherInworkroom
      getWorkroomOnlineTeacher(this.studioId).then((res) => {
        let data = res.rows;
        // this.total = res.total
        for (let i in data) {
          data[i].avatar = handleImageUrl(data[i].avatar);
          let data2 = getperiod();
          for (let j in data2) {
            if (data[i].periodId == data2[j].value) {
              data[i].periodId = data2[j].text;
            }
          }
          let data3 = getsubject();
          for (let j in data3) {
            if (data[i].subjectId == data3[j].value) {
              data[i].subjectId = data3[j].text;
            }
          }
        }
        this.teacherlist = [];
        this.teacherlist = data;
      });
    },
    returnclick() {
      this.$router.push(this.$store.state.user.urlstudio);
    },
    startask() {
      if (this.online) {
        if (this.$store.state.user.name) {
          this.$store.state.user.urlstartask = "/pages/aqc/startask";
          this.$router.push("/pages/aqc/startask");
        } else {
          this.$store.state.user.urllogin = "/pages/aqc/studio";
          this.$tab.reLaunch("/pages/login");
        }
      } else {
        // 答疑时间为每周日上午9：00-11：00。
        this.popup = {
          title: "提示",
          text: "很抱歉，现在未在答疑服务期。",
          button: "确定",
          url: "",
        };
        this.open();
      }
    },
    open() {
      // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
      this.$refs.popup.open("center");
    },
    closepopup() {
      this.$refs.popup.close();
    },
    popupjump() {
      if (this.popup.url) {
        this.$router.push(this.popup.url);
      } else {
        this.$refs.popup.close();
      }
    },
  },
};
</script>

<style>
.container {
  font-size: 4vw;
  width: 100vw;
  height: 100vh;
  display: grid;
  justify-items: center;
  align-items: center;
  /* grid-template-columns: 1fr; */
  grid-template-rows: 12.5vw auto 12.5vw;
}
.header {
  width: 100%;
  height: 12.5vw;
  background: #ffffff;
  border: 1px solid #f6f7f8;
  display: grid;
  justify-items: center;
  align-items: center;
  /* grid-template-columns: 1fr; */
  /* grid-template-rows: 1fr 1fr; */
}
.header-title {
  font-size: 5vw;
}
.header-return {
  position: absolute;
  width: 5vw;
  height: 5vw;
  left: 5vw;
  top: 3.5vw;
  background: url(../../static/index/return.svg);
  background-size: 100% 100%;
  cursor: pointer;
}
.nodata-icon {
  margin: 0 auto 0 auto;
  width: 100vw;
  height: 100vw;
  background: url(../../static/index/nodata.svg);
  /* background: url(../../static/index/nodata.png); */
  background-size: 100% 100%;
}
.nodata-text {
  width: 100%;
  font-size: 5vw;
  display: grid;
  justify-items: center;
  align-items: center;
}
.body {
  margin: 0 0 0 0;
  width: 100%;
  height: 100%;
  display: grid;
  justify-items: center;
  align-items: center;
  /* grid-template-columns: 1fr; */
  grid-template-rows: auto auto auto 21vw;
  overflow: auto;
}
.body-top {
  width: 100%;
  height: 39vw;
}
.body-top-icon {
  width: 100vw;
  height: 57.8vw;
  background: url(../../static/aqc/hottop.png);
}
.body-studio {
  padding: 0 2vw;
  width: 90vw;
  /* height: 100%; */
  display: grid;
  justify-items: center;
  align-items: start;
  /* grid-template-columns: 20% 75%; */
  /* grid-template-rows: 20% 1fr 10%; */
  background: #ffffff99;
  border: 1px solid #ffffff;
  border-radius: 2vw;
  backdrop-filter: blur(10px);
}
.body-studio-icon {
  /* width: 100%;
		height: 40vw;
		background: url(../../static/aqc/studiohalf.svg);
		background-size: 100% 100%; */
}
.body-teacher-icon {
  margin: auto 0;
  width: 100%;
  height: 100%;
  background: url(../../static/aqc/head.png);
  background-size: 100% 100%;
}
.body-studio-content {
  margin: 1vw 0;
  width: 100%;
  min-height: 36vw;
  display: grid;
  justify-items: start;
  align-items: center;
  /* grid-template-columns: 20% 80%; */
  grid-template-rows: 8vw auto 8vw;
}
.body-studio-content-title {
  font-size: 5.33333vw;
  font-weight: 550;
  color: #363a44;
}
.body-studio-content-text {
  margin: 2vw 0;
  font-size: 3.2vw;
  color: #5f5f5fc0;
}
.body-studio-content-unfold {
  margin: 0 2vw 0 auto;
  font-size: 3.2vw;
  color: #1492ff;
}
.body-teacher {
  width: 100vw;
  height: 60vh;
}
.body-teacher-piece {
  margin: 2vw auto 0 auto;
  padding: 3vw 0 0 0;
  width: 90vw;
  min-height: 30vw;
  background: #ffffff;
  display: grid;
  justify-items: center;
  align-items: start;
  grid-template-columns: 20% 78%;
  /* grid-template-rows: 20% 80%; */
  border-radius: 2vw;
}
.body-teacher-piece-icon {
  width: 15vw;
  height: 15vw;
  /* background: url(../../static/aqc/teacher.svg);
		background-size: 100% 100%; */
}
.body-teacher-piece-img {
  width: 15vw;
  height: 15vw;
  /* background: url(../../static/aqc/teacher.svg);
		background-size: 100% 100%; */
}
.body-teacher-piece-content {
  width: 100%;
  height: 100%;
  display: grid;
  justify-items: center;
  align-items: center;
  /* grid-template-columns: auto 1fr auto; */
  grid-template-rows: auto 1fr auto;
}
.body-teacher-piece-content-top {
  width: 100%;
  height: 100%;
  display: grid;
  justify-items: center;
  align-items: center;
  grid-template-columns: auto 1fr auto;
  /* grid-template-rows: 20% 80%; */
}
.body-teacher-piece-content-name {
  font-weight: 550;
  font-size: 5.33333vw;
  color: #363a44;
}
.body-teacher-piece-content-label {
  width: 100%;
  height: 100%;
  display: flex;
}

.label {
  margin: 0 1vw;
  padding: 0 2vw;
  width: auto;
  height: 6vw;
  display: inline-block;
  font-size: 3.5vw;
  line-height: 6vw;
}
.color1 {
  color: #ff9900;
  background: #fff8e9;
}
.color2 {
  color: #1492ff;
  background: #ecf5ff;
}
.color3 {
  color: #00b578;
  background: #ebf9f4;
}
.body-teacher-piece-content-text {
  margin: 2vw 0;
  font-size: 3.2vw;
  color: #5f5f5fc0;
}
.body-button {
  width: 95vw;
  height: 10vw;
  border-radius: 5vw;
  display: grid;
  justify-items: center;
  align-items: center;
  /* font-size: 4vw; */
  color: #ffffff;
  background: #1492ff;
  cursor: pointer;
}
.omit {
  overflow: hidden; /*超出内容隐藏*/
  text-overflow: ellipsis; /*超出内容为省略号*/
  display: -webkit-box; /*内容不换行*/
  -webkit-line-clamp: 1; /*超出几行*/
  -webkit-box-orient: vertical; /*从上到下垂直排列子元素*/
  text-overflow: ellipsis;
}
.omit3 {
  overflow: hidden; /*超出内容隐藏*/
  text-overflow: ellipsis; /*超出内容为省略号*/
  display: -webkit-box; /*内容不换行*/
  -webkit-line-clamp: 3; /*超出几行*/
  -webkit-box-orient: vertical; /*从上到下垂直排列子元素*/
  text-overflow: ellipsis;
}
.omit4 {
  overflow: hidden; /*超出内容隐藏*/
  text-overflow: ellipsis; /*超出内容为省略号*/
  display: -webkit-box; /*内容不换行*/
  -webkit-line-clamp: 4; /*超出几行*/
  -webkit-box-orient: vertical; /*从上到下垂直排列子元素*/
  text-overflow: ellipsis;
}

.popup {
  width: 60vw;
  height: 40vw;
  background: #ffffff;
  position: absolute;
  margin-left: -30vw;
  margin-top: -20vw;
  border-radius: 2.2vw;

  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-rows: 5vw 5vw 15vw 15vw;
}
.popup-close {
  margin: 2vw 0 0 55vw;
  width: 3vw;
  height: 3vw;
  background: url(../../static/index/close.svg);
  background-size: 100% 100%;
  cursor: pointer;
}
.popup-title {
  display: grid;
  justify-content: center;
  align-items: center;
  font-weight: 550;
  font-size: 4vw;
}
.popup-text {
  margin: 0 5vw 0 05vw;
  width: 50vw;
  display: grid;
  justify-content: center;
  align-items: center;
  font-size: 3.4vw;
}
.popup-button {
  margin: 0 5vw 0 5vw;
  width: 50vw;
  height: 8vw;
  border-radius: 4vw;
  display: grid;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  background: #1492ff;
  cursor: pointer;
}
</style>
